<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		canvas {border: 1px solid black;}
	</style>
	<body>
		<canvas id="canvasq" width="1000" height="1000"></canvas>
		
		
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let ocan=document.getElementById('canvasq');
			let ppen=ocan.getContext('2d');
			
			let qqq=[{value:10,color:"green",name:'one'},
					{value:20,color:'blue',name:'two'},
					{value:40,color:'red',name:'three'},
					{value:80,color:'purple',name:'four'},
					{value:160,color:'black',name:'five'}];
					
					
					
					createSector(ppen,400,300,100,qqq);
					
					createName(ppen,700,100,qqq);
					
					
					
					function createSector(oPen,x,y,r,data){
						let sum=0;
						for(var i=0;i<data.length;i++){
							sum+=data[i].value;
						}
						
						for(var i=0;i<data.length;i++){
							data[i].percentage=(data[i].value*1.0)/sum*360;
						}
						
						let startAngle=0;
						
						for(var i=0;i<data.length;i++){
							oPen.beginPath();
							oPen.moveTo(x,y);
							oPen.arc(x,y,r,startAngle,startAngle+(Math.PI/180)*data[i].percentage,false);
							startAngle+=(Math.PI/180)*data[i].percentage;
							oPen.fillStyle=data[i].color;
							oPen.fill();
							
						}
					}
					
					function createName(oPen,x,y,data){
							oPen.font='bold  20px 微软雅黑';
		
						for(var i=0;i<data.length;i++){								
							oPen.fillStyle=data[i].color;	
							oPen.fillRect(x-50,y-22,30,30);							
							name=data[i].name+'  '+data[i].value;	
							console.log(data[i].color);
							oPen.fillStyle=data[i].color;
							oPen.fillText(name,x,y);				
							y+=40;
						}
						
						
					}
					
					
					
					
		}
	</script>
</html>
